<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="日期" prop="date" >
        <el-date-picker
          v-model="daterangeDate"
          size="small"
          type="daterange"
          align="right"
          style="width: 240px"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        />

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <span :style="{marginLeft:'20px'}">说明：最大时间选择范围是90天</span>
      </el-form-item>
    </el-form>
    <div id="myChart1" :style="{width: '80%', height: '500px',marginBottom:'80px'}" />

    <div id="myChart" :style="{width: '80%', height: '500px',marginBottom:'80px'}"  />

  </div>
</template>

<script>
import { listCigaretteDaliySales} from "@/api/energize/daliySalesReport";

export default {
  name: "DaliySalesReport",
  data() {
    return {
      // 客户进店转化率时间范围
      daterangeDate: [],
      queryParams:{},
      // 显示搜索条件
      showSearch: true,
      legendDataList:[],
      xAxisDataList:[],
      seriesVoList:[],
      pickerMinDate: '', //获取开始选择时间
      pickerMaxDate: '', //获取结束选择时间
      pickerOptions: {
        //时间范围选择控制
        onPick: ({ maxDate, minDate }) => {
          if (minDate) {
            this.pickerMinDate = minDate.getTime()
          }
          if (maxDate) {
            this.pickerMaxDate = ''
            this.pickerMaxDate = maxDate.getTime()
          }
        },
        disabledDate: time => {
          const day180 = 90 * 24 * 3600 * 1000
          if (this.pickerMinDate !== '') {
            let maxTime = this.pickerMinDate + day180
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() > maxTime || time.getTime() > Date.now() - 86400000
          }
          if (this.pickerMaxDate !== '' && !this.pickerMaxDate) {
            let minTime = this.pickerMaxDate - day180
            return time.getTime() < minTime || time.getTime() > Date.now() - 86400000
          }
          return time.getTime() > Date.now() - 86400000
        },
      },
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getDefaultTime(),
    this.getList();

  },
  methods: {
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '门店卷烟销售额对比',
          subtext: '按照门店统计总销售额',
          x: 'center'
        },
        legend: {
          orient: 'horizontal',
          x: 'center',
          y: 'bottom',
          data: this.legendDataList
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.xAxisDataList
        },
        yAxis: {
          type: 'value'
        },
        series:{
          data:this.seriesVoList,
          type: 'bar'
        }
      },true);
    },
    drawLine1(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart1'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '烟及含烟订单销售占比',
          subtext: '烟类非烟类含烟类订单占比饼图',
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        label:{
          formatter:function(data){
            return `${data.name} ${data.value}
	(${data.percent.toFixed(1)}%)`
          }
        },
        tooltip: {trigger: 'item'},
        series: [
          {
            name: '',
            type: 'pie',
            radius: '65%',
            data:this.seriesVoList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },true);
    },
    getDefaultTime() {
      const start = new Date()
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      let da =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6*30)
      let year1 = start.getFullYear().toString();
      let month1 =
        start.getMonth() + 1 < 10
          ? "0" + (start.getMonth() + 1).toString()
          : (start.getMonth() + 1).toString();
      let da1 =
        start.getDate() < 10
          ? "0" + start.getDate().toString()
          : start.getDate().toString();
      let end = year + "-" + month + "-" + da;
      let beg = year1 + "-" + month1 + "-"+da1;
      //将值设置给插件绑定的数据
      this.daterangeDate.push(end);
      this.daterangeDate.unshift(beg);
      this.pickerMinDate = this.daterangeDate[0]
    },
    /** 查询门店日销售报表列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeDate && '' != this.daterangeDate) {
        this.queryParams.params["beginDate"] = this.daterangeDate[0];
        this.queryParams.params["endDate"] = this.daterangeDate[1];
      }else{
        alert("必须选择时间范围");return;
      }
      listCigaretteDaliySales(this.queryParams).then(response => {
        this.legendDataList=response.cigaretteRes.legendDataList;
        this.xAxisDataList=response.cigaretteRes.xAxisDataList;
        this.seriesVoList=response.cigaretteRes.seriesVoList;
        this.drawLine();
        this.seriesVoList=response.seriesVoList;
        this.drawLine1();
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        date: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
  }
};
</script>
